<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Training Web Components Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .demo-container {
            background: white;
            border-radius: 20px;
            padding: 40px;
            max-width: 600px;
            width: 100%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
            font-size: 28px;
        }

        .controls {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .btn {
            padding: 15px 30px;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            color: white;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .btn-success {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        }

        .btn-warning {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        }

        .btn-danger {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        }

        .btn-info {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        }

        .info {
            margin-top: 30px;
            padding: 20px;
            background: #f3f4f6;
            border-radius: 10px;
        }

        .info h3 {
            margin-bottom: 10px;
            color: #333;
        }

        .info p {
            color: #666;
            line-height: 1.6;
            margin-bottom: 10px;
        }

        .video-preview {
            margin-top: 20px;
            width: 100%;
            height: 300px;
            background: #000;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div class="demo-container">
        <h1>🏋️ Training Web Components Demo</h1>

        <div class="controls">
            <button class="btn btn-primary" onclick="showStartPopup()">
                显示开始训练弹窗
            </button>

            <button class="btn btn-warning" onclick="showCountdown()">
                显示倒计时覆盖层
            </button>

            <button class="btn btn-success" onclick="showFinishPopup()">
                显示训练完成弹窗
            </button>

            <button class="btn btn-danger" onclick="toggleTraining()">
                切换训练状态指示器
            </button>

            <button class="btn btn-info" onclick="showPermissionGuide()">
                显示权限引导页
            </button>

        </div>

        <div class="video-preview">
            <span>📹 摄像头预览区域</span>
        </div>

        <div class="info">
            <h3>📝 使用说明</h3>
            <p>1. 点击按钮测试各个 Web Component 组件</p>
            <p>2. 所有组件都使用 Shadow DOM 封装，样式完全隔离</p>
            <p>3. 组件通过自定义事件与外部通信</p>
            <p>4. 打开浏览器控制台查看事件日志</p>
            <p><strong>注：</strong>消息提示框较简单，不需要封装成组件</p>
        </div>
    </div>

    <!-- Web Components -->
    <training-start-popup id="startPopup"></training-start-popup>
    <training-countdown-overlay id="countdown"></training-countdown-overlay>
    <training-finish-popup id="finishPopup"></training-finish-popup>
    <training-status-indicator id="statusIndicator"></training-status-indicator>
    <!-- 无需任何配置，默认自动检测并移除 -->
    <camera-permission-guide id="permissionGuide"></camera-permission-guide>

    <!-- 引入组件脚本 -->
    <script type="module">
        // 导入所有组件
        import './training-start-popup.js';
        import './training-countdown-overlay.js';
        import './training-finish-popup.js';
        import './training-status-indicator.js';
        import './camera-permission-guide.js';

        // 获取组件引用
        window.startPopup = document.getElementById('startPopup');
        window.countdown = document.getElementById('countdown');
        window.finishPopup = document.getElementById('finishPopup');
        window.statusIndicator = document.getElementById('statusIndicator');
        window.permissionGuide = document.getElementById('permissionGuide');

        // 监听开始训练事件
        startPopup.addEventListener('start-training', () => {
            console.log('✅ 事件: 开始训练');
            startPopup.setAttribute('visible', 'false');

            // 自动开始倒计时
            startCountdownSequence();
        });

        // 监听完成确认事件
        finishPopup.addEventListener('confirm', () => {
            console.log('✅ 事件: 确认完成');
            finishPopup.setAttribute('visible', 'false');
        });

        // 监听权限授予事件
        permissionGuide.addEventListener('permission-granted', async (e) => {
            console.log('✅ 事件: 权限已授予，可以继续使用');
            console.log('权限状态:', e.detail.hasPermission);

            // 组件已完成权限检测并释放资源
            // 如果需要使用摄像头，自己重新获取
            console.log('💡 组件已释放摄像头，如需使用请自行调用 getUserMedia');

            // 示例：如果需要使用摄像头
            // const stream = await navigator.mediaDevices.getUserMedia({ video: true });
            // videoElement.srcObject = stream;
        });

        // 监听权限拒绝事件
        permissionGuide.addEventListener('permission-denied', (e) => {
            console.log('❌ 事件: 权限被拒绝，显示引导页');
            console.log('错误类型:', e.detail.errorType);
        });

        // 监听权限错误事件
        permissionGuide.addEventListener('permission-error', (e) => {
            console.error('⚠️ 事件: 权限请求失败');
            console.error('错误:', e.detail.error);
            console.error('消息:', e.detail.message);
            // 错误信息已经在组件内部显示，这里只需要记录日志
        });

        // 倒计时序列
        window.startCountdownSequence = function () {
            countdown.setAttribute('visible', 'true');
            let count = 3;
            countdown.setAttribute('countdown', count.toString());

            const timer = setInterval(() => {
                count--;
                if (count > 0) {
                    countdown.setAttribute('countdown', count.toString());
                } else {
                    clearInterval(timer);
                    countdown.setAttribute('visible', 'false');

                    // 自动显示训练状态
                    statusIndicator.setAttribute('visible', 'true');
                    console.log('🏋️ 训练开始！');

                    // 5秒后自动完成
                    setTimeout(() => {
                        statusIndicator.setAttribute('visible', 'false');
                        finishPopup.setAttribute('visible', 'true');
                    }, 5000);
                }
            }, 1000);
        };

        console.log('✅ Training Web Components 已加载');
    </script>

    <script>
        // 控制函数
        function showStartPopup() {
            console.log('显示开始训练弹窗');
            startPopup.setAttribute('visible', 'true');
        }

        function showCountdown() {
            console.log('显示倒计时');
            startCountdownSequence();
        }

        function showFinishPopup() {
            console.log('显示训练完成弹窗');
            finishPopup.setAttribute('visible', 'true');
        }

        let trainingVisible = false;
        function toggleTraining() {
            trainingVisible = !trainingVisible;
            console.log('训练状态:', trainingVisible ? '显示' : '隐藏');
            statusIndicator.setAttribute('visible', trainingVisible ? 'true' : 'false');
        }

        function showPermissionGuide() {
            console.log('显示权限引导页');
            permissionGuide.setAttribute('visible', 'true');
        }
    </script>
</body>

</html>